{include file='header'/}
<style>
    .card {
        position: relative;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        background-color: #fff;
        background-clip: border-box;
        border-radius: 4px;
    }
    .card {
        margin-bottom: 16px;
    }
    .card-shadow {
        box-shadow: 0 2px 5px rgba(0,0,0,.1);
    }
    .card-border {
        border: 1px solid #e5e6eb;
    }
    .card-list{margin-top:16px;}
    .card-list .img-thumb {
        max-height: 250px;
        overflow: hidden;
        width: 100%;
        border-top-right-radius: 2px;
        border-top-left-radius: 2px;
    }
    .card-list .card>.img-thumb img {
        width: 100%;
    }
    .card-img, .card-img-top {
        border-top-left-radius: calc(.25rem - 0);
        border-top-right-radius: calc(.25rem - 0);
    }
    .card-img, .card-img-bottom, .card-img-top {
        -ms-flex-negative: 0;
        flex-shrink: 0;
        width: 100%;
    }
    .app-list .card-body {
        padding: 12px 16px 12px 16px;
    }
    .card-body {
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        min-height: 1px;
        padding: 20px;
    }
    .card-title {
        float: left;
        font-size: 1.1rem;
        font-weight: 400;
        margin: 0;
    }
    .card-list .card .card-title {
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        margin-bottom: 8px;
        font-size: 14px;
    }

    .card-info {
        color: #86909c;
        font-size: 12px;
        margin-bottom: 8px;
    }
    .card-list .card .card-text {
        width: 100%;
        height: 38px;
        overflow: hidden;
        color: #86909c;
        font-size: 12px;
        margin-bottom: 8px;
    }
    .card-text {
        clear: both;
    }
    hr {
        margin-top: 16px;
        margin-bottom: 16px;
        border: 0;
        border-top: 1px solid #e5e6eb;
        box-sizing: content-box;
        height: 0;
        overflow: visible;
    }
    .align-items-center {
        -ms-flex-align: center!important;
        align-items: center!important;
    }
    .footer-fa {
        font-size: 12px;
        color: #989da2;
    }
    .btn:not(:disabled):not(.disabled) {
        cursor: pointer;
    }
    .btn-group, .btn-group-vertical {
        position: relative;
        display: -ms-inline-flexbox;
        display: inline-flex;
        vertical-align: middle;
    }
</style>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">模板</li>
                <li>插件</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <!--模板-->
                    <button class="pear-btn pear-btn-primary pear-btn-md"
                            title="导入模版">
                        <i class="layui-icon layui-icon-add-1"></i>
                        导入模版
                    </button>

                    <div class="layui-row layui-col-space10 card-list">
                        <input type="hidden" value="" class="applist">

                        <div class="layui-col-md3 layui-col-sm4 layui-col-xs6">
                            <div class="card card-border card-shadow">
                                <div class="img-thumb img-test">
                                    <a href="#" class="btn-show-desc" data-toggle="tooltip" style="display: block"
                                       data-title="点我去到详情" data-original-title="" title="">
                                        <img src="/static/admin/images/nopic.png" class="card-img-top">
                                    </a>
                                </div>
                                <div class="card-body">
                                    <h5 class="card-title" data-title="白色响应式多语言通用模板" data-toggle="tooltip"
                                        data-original-title="" title="">白色响应式多语言通用模板</h5>
                                    <p class="d-flex align-items-center justify-content-between card-info"
                                       style="width: 100%">
                                        <span>-</span>
                                        <a href="#!" data-trigger="hover" data-toggle="tooltip" target="_blank"
                                           data-title="点我前往作者主页" class="user-test" data-original-title=""
                                           title=""><i class="fas fa-user-alt"></i> hkcms</a>
                                    </p>

                                    <p class="card-text" data-title="白色响应式多语言通用模板" data-toggle="tooltip"
                                       data-original-title="" title="">白色响应式多语言通用模板</p>
                                    <hr style="margin: 8px 0 8px 0">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div class="footer-fa">
                                            <a href="#" class="layui-btn btn-primary btn-sm btn-install-db" data-name="test"
                                               data-type="template" data-module="index">安装</a>
                                        </div>
                                        <div class="footer-fa version-test">
                                            <div class="btn-group">
                                                <button class="layui-btn btn-xs btn-default" data-trigger="hover"
                                                        data-toggle="tooltip" data-title="当前版本"
                                                        data-original-title="" title=""><span><i
                                                        class="fas fa-info-circle"></i> 1.0.1</span></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md3 layui-col-sm4 layui-col-xs6">
                            你的内容 3/12
                        </div>
                    </div>

                </div>
                <div class="layui-tab-item">
                    <!--插件-->
                    <script type="text/html" id="add_addon_toolbar">
                        <button class="pear-btn pear-btn-primary pear-btn-md"
                                data-open="{:url('appcenter/add')}"
                                data-title="添加管理员">
                            <i class="layui-icon layui-icon-add-1"></i>
                            新增
                        </button>
                    </script>
                    <script type="text/html" id="statusTpl">
                        {{#  if(d.db_install != false){ }}
                        <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用"
                               lay-filter="switchStatus"
                               data-href="{:url('appcenter/enable')}?name={{d.name}}&type=addon"
                               {{d.status== '1' ? 'checked' : '' }} />
                        {{#  } }}
                    </script>
                    <script type="text/html" id="imageTpl">
                        {{#  if(d.image !=''){ }}
                        <img src="{{d.image}}" onmouseover="hui_img_preview('image2','{{d.image}}')"
                             onmouseout="layer.closeAll();"
                             id="image2" width="40">
                        {{#  } }}
                    </script>

                    <script type="text/html" id="barDemo">
                        {{#  if(d.db_install == false){ }}
                        <a class="pear-btn pear-btn-xs"
                           data-confirm="{:url('appcenter/installDb')}?name={{d.name}}&type=addon"
                           data-title="确定安装该插件吗？" data-reload="2">安装</a>
                        {{#  } else { }}
                        <button class="pear-btn pear-btn-success pear-btn-xs" title="设置"
                                data-open="{:url('appcenter/setConfig')}?name={{d.name}}&type=addon"
                                data-title="设置">设置
                        </button>
                        <button class="pear-btn pear-btn-danger pear-btn-xs" title="卸载"
                                data-delete="{:url('appcenter/uninstall')}?name={{d.name}}&type=addon"
                                data-title="！！【重要】确定要卸载吗？文件也将被删除！" data-reload="2">
                            卸载
                        </button>
                        {{#  } }}

                    </script>

                    <table id="addon_table" lay-filter="addon_table"></table>

                </div>
            </div>
        </div>


    </div>
</div>

{include file='footer'/}
<script>
  layui.use(['layer', 'jquery', 'form', 'table'], function () {
    var layer = layui.layer;
    var $ = layui.jquery;
    var form = layui.form;
    var table = layui.table;
    form.render();

    table.render({
      elem: '#addon_table'
      , toolbar: '#add_addon_toolbar'
      , defaultToolbar: [{
        layEvent: 'refresh',
        icon: 'layui-icon-refresh',
        title: '刷新'
      }, 'filter', 'exports']
      , method: 'get'
      , where: {type: 'addon'}
      , url: "{:url('appcenter/index')}"
      , parseData: function (res) {
        return {
          "code": 0,
          "msg": res.msg,
          "count": res.count,
          "data": res.data
        };
      }
      , cols: [[
        {field: 'title', title: '标题', width: 220}
        , {field: 'image', title: '封面', width: 80, templet: '#imageTpl', align: 'center'}
        , {field: 'description', title: '介绍'}
        , {field: 'author', title: '作者', width: 120, align: 'center'}
        , {field: 'price', title: '价格', width: 120, align: 'center'}
        , {field: 'version', title: '版本', width: 120, align: 'center'}
        , {field: 'status', title: '状态', align: 'center', templet: '#statusTpl', width: 100}
        , {fixed: 'right', title: '操作', toolbar: '#barDemo', align: 'center', width: 210}
      ]]
      , id: 'addonReload'
      , page: false
    });


    $('.hui-form-search .layui-btn').on('click', function () {
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
    $('.hui-form-search .reset').on('click', function () {
      window.location.reload();
    });

    //监听行工具事件
    table.on('toolbar(addon_table)', function (obj) {
      if (obj.event === 'refresh') {
        table.reload('addonReload');
      }
    });

    window.show_shopm = function (t) {
      var row = $(t).attr('data-tips'); //获取显示内容

      //小tips
      layer.tips(row, t, {
        tips: [1, '#000'],
        time: 4000
      })
    }

  })
</script>
</body>
</html>
